<!-- d3 搜索组件 -->
<template>
  <div class="search_wrap" :class="{collapse: isCollapse}">
    <div class="control_collapse" :class="{collapse: isCollapse}" @click="toggleCollapse" title="控制栏">
      <div class="collapse_wrap">
        <span v-if="!isCollapse" style="font-size: 24px;font-weight: 700;">控制栏</span><span><i class="el-icon-s-fold" v-if="!isCollapse"></i><i class="el-icon-s-unfold" v-if="isCollapse"></i></span>
      </div>
    </div>
    <div class="search_content" :class="{collapse: isCollapse}">
      <el-input style="width: 600px" v-model="search.keyword" placeholder="请输入内容" clearable title="隐患项搜索">
        <el-select v-model="search.type" slot="prepend" placeholder="类型" style="width: 130px" title="类型切换">
          <el-option :label="item.value" :value="item.key" v-for="item in dictList" :key="item.key"></el-option>
        </el-select>
        <el-button slot="append" type="success" icon="el-icon-search" @click="query">搜索</el-button>
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'd3Search',
  data() {
    return {
      search: {
        keyword: '', type: 'HZ',//默认显示火灾类型的知识图谱
      },
      isCollapse: false,
      dictList: [{ key: 'HZ', value: '火灾' }, { key: 'CF', value: '处罚' }],//数据字典功能
    }
  },
  mounted() {
    this.$emit('getSearch', this.search)
  },
  methods: {
    //搜索功能---调用搜索接口
    query() { this.$emit('getSearch', this.search) },
    //切换控制栏折叠
    toggleCollapse() { this.isCollapse = !this.isCollapse; this.$emit('toggleCollapse', this.isCollapse) }
  }
}
</script>

<style lang='scss' scoped>
.search_wrap {
  position: relative;
  z-index: 9;
  &.collapse {
    box-shadow: 0 1px 10px #aaa;
  }
  display: flex;
  .control_collapse {
    .collapse_wrap {
      padding: 0 20px;
      width: 200px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    line-height: 60px;
    font-size: 30px;
    transition: 0.2s;
    &:hover {
      cursor: pointer;
    }

    &.collapse {
      width: 60px;
    }
  }
  .search_content {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 10px 1px 10px #aaa;
    &.collapse {
      box-shadow: unset;
    }
  }
  .rigth_search_control {
    width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 60px;
    font-size: 30px;
    transition: 0.2s;
  }
}
</style>

